<template>
  <div>
    <div class="title">news.publish </div>
    <button @click="gotoPreview" class="view">预览</button>
  </div>

  <div class="news-publish flex flex-col items-center py-[20px] pt-[40px]">
    <div>
      <div class="step-indicator w-[20vw] mx-auto">
        <div class="step-item active">
          <div class="step-number">1</div>
          <div class="step-label">发布内容</div>
        </div>
        <div class="step-divider"></div>
        <div class="step-item">
          <div class="step-number">2</div>
          <div class="step-label">发布设置</div>
        </div>
      </div>
      <ReleaseList  class="w-[60vw]" ref="releaseRef" />
      <!-- <NoData v-else /> -->

      <div class="mt-4 text-center">
        <el-button type="primary" @click="gotoNext">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import { useRouter } from 'vue-router';
import ReleaseList from '../Newspool/ReleaseList.vue'; // 引入列表组件
import NoData from './NoData.vue'; // 引入空状态组件
import { getReleaseList } from '@/api/newspool';

const router = useRouter();
const releaseRef = ref<InstanceType<typeof ReleaseList> | null>(null);
const isLoading = ref(true);
const list = ref([]);
const handleUpdate=async(value:[])=>{
  list.value=value
}

onMounted(() => {
  watch(
    () => releaseRef?.value?.releaseList,
    (newList) => {
      if (newList !== undefined) {
        isLoading.value = false; 
      }
    },
    { immediate: true }
  );
});

const gotoNext = () => {
  router.push('/publishSetting');
};

// 预览：跳转到预览页
const gotoPreview = () => {
  router.push('/preview/lookList');
};
const hasData = computed(() => {
  return !isLoading.value && releaseRef.value?.releaseList && releaseRef.value.releaseList.length > 0
})


</script>

<style scoped>
.title {
  font-size: 16px;
  font-weight: 500;
  float: left;
}

.view {
  float: right;
  padding: 4px 8px;
  border: 1px solid #2563eb;
  color: #2563eb;
  border-radius: 4px;
  cursor: pointer;
}

/* 步骤条样式 */
.step-indicator {
  display: flex;
  align-items: center;
}

.step-item {
  display: flex;
  align-items: center;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 8px;
}

.active .step-number {
  background-color: #2563eb;
  color: white;
}

.step-label {
  font-size: 16px;
}

.active .step-label {
  color: #111827;
}

.step-divider {
  flex: 1;
  height: 1px;
  background-color: #e5e7eb;
  margin: 0 8px;
}

.step-item:not(.active) .step-number {
  background-color: #e5e7eb;
  color: #9ca3af;
}

.step-item:not(.active) .step-label {
  color: #9ca3af;
}

/* 加载状态样式 */
.loading-state {
  color: #666;
  margin: 20px 0;
}

/* 容器样式 */
.news-publish {
  clear: both;
  /* 清除浮动，避免与标题/预览按钮重叠 */
}
</style>